<script setup lang="ts">
import { pwEditApi } from '@/api/System/user';
import { notify } from '@/utils/anted';
import { Modal, Form, FormItem, InputPassword } from 'ant-design-vue';
import { reactive } from 'vue';

// 定义状态
const state = reactive({
  visible: false,
  title: '新增',
  type: 'add'
});

const useForm = Form.useForm;
const modelStateRef = reactive({
  id: '',
  password: '',
  NewPassword: ''
});
const rulesRef = reactive({
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ],
  NewPassword: [
    {
      required: true,
      message: '请输入确认密码'
    }
  ]
});
const { validate, validateInfos, resetFields } = useForm(
  modelStateRef,
  rulesRef
);
const onSubmit = () => {
  validate()
    .then(async () => {
      await pwEditApi('');
      notify("密码重置成功！", { type: "success" });
      state.visible = false;
    })
    .catch(err => {
      console.log('error', err);
    });
};
const open = (type: any, title: any, row: any) => {
  state.title = title;
  state.type = type;
  state.visible = true;
  if (row) {
    modelStateRef.id = row.id;
  }
};
// 导出给父组件调用
defineExpose({
  open
});
</script>
<template>
  <Modal
    v-model:open="state.visible"
    :title="state.title"
    @ok="onSubmit"
    destroyOnClose
    @cancel="resetFields"
  >
    <Form>
      <FormItem
        label="新密码"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.password"
      >
        <InputPassword
          v-model:value="modelStateRef.password"
          placeholder="请输入新密码"
        />
      </FormItem>
      <FormItem
        label="确认密码"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.NewPassword"
      >
        <InputPassword
          v-model:value="modelStateRef.NewPassword"
          placeholder="请输入确认密码"
        />
      </FormItem>
    </Form>
  </Modal>
</template>

<style scoped></style>
